<template>
    <div>
        <div class="gva-search-box">
            <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline"
                     :rules="searchRule" @keyup.enter="onSubmit">
                <el-form-item label="创建日期" prop="createdAt">
                    <template #label>
        <span>
          创建日期
          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
            <el-icon><QuestionFilled/></el-icon>
          </el-tooltip>
        </span>
                    </template>
                    <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期"
                                    :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
                    —
                    <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期"
                                    :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
                </el-form-item>
                <el-form-item label="设备名称" prop="equipmentName">
                    <el-input
                            v-model="searchInfo.equipmentName"
                            :clearable="true"
                            placeholder="设备名称"
                    />
                </el-form-item>
                <!--          <el-form-item label="设备种类" prop="equipmentKind">-->
                <!--              <el-select v-model="tableData.value" class="full-width-input" clearable>-->
                <!--                  <el-option v-for="(item, index) in kindData" :key="index" :label="item.kindName"-->
                <!--                             :value="item.value"></el-option>-->
                <!--              </el-select>-->
                <!--          </el-form-item>-->
                <el-form-item label="生产状态" prop="productionStatus">
                    <el-select v-model="searchInfo.productionStatus" class="full-width-input" clearable>
                        <el-option v-for="(item, index) in productionOptions" :key="index" :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备种类" prop="equipmentKind">
                    <el-select v-model="searchInfo.equipmentKind" class="full-width-input" clearable>
                        <el-option v-for="(item, index) in kindOptions" :key="index" :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备编号" prop="equipmentNum">
                    <el-input
                            v-model="searchInfo.equipmentNum"
                            placeholder="设备编号"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                    <el-button icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box">
            <div class="gva-btn-list">
                <el-button type="primary" icon="plus" @click="openDialog">新增设备</el-button>
                <el-popover v-model:visible="deleteVisible" :disabled="!multipleSelection.length" placement="top"
                            width="160">
                    <p>确定要删除吗？</p>
                    <div style="text-align: right; margin-top: 8px;">
                        <el-button type="primary" link @click="deleteVisible = false">取消</el-button>
                        <el-button type="primary" @click="onDelete">确定</el-button>
                    </div>
                    <!--            <template #reference>-->
                    <!--                <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>-->
                    <!--            </template>-->
                </el-popover>
            </div>
            <el-table
                    ref="multipleTable"
                    style="width: 100%"
                    tooltip-effect="dark"
                    :data="tableData"
                    row-key="ID"
                    @selection-change="handleSelectionChange"
            >
                <!--        <el-table-column type="selection" width="55" />-->
                <el-table-column align="left" label="设备编号" prop="equipmentNum" width="135"/>
                <el-table-column align="left" label="设备名称" prop="equipmentName" width="135"/>
                <el-table-column align="left" label="设备种类" prop="equipmentKind" width="135"/>
                <el-table-column align="left" label="设备型号" prop="equipmentType" width="135"/>
                <el-table-column align="left" label="添加日期" width="165">
                    <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
                </el-table-column>
                <el-table-column align="left" label="生产状态" prop="productionStatus" width="135"/>
                <el-table-column align="left" label="审核状态" prop="auditStatus" width="135"/>
                <el-table-column align="left" label="操作" width="240">
                    <template #default="scope">
                        <el-button type="primary" link class="table-button" @click="getDetails(scope.row)">
                            <el-icon style="margin-right: 5px">
                                <InfoFilled/>
                            </el-icon>
                            查看详情
                        </el-button>
                        <el-button type="primary" link icon="edit" class="table-button"
                                   @click="updateEquipmentFunc(scope.row)">编辑
                        </el-button>
                        <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :current-page="page"
                        :page-size="pageSize"
                        :page-sizes="[10, 30, 50, 100]"
                        :total="total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                />
            </div>
        </div>
        <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type==='create'?'添加':'修改'"
                   destroy-on-close>
            <el-scrollbar height="500px">
                <el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" label-width="80px">
                    <el-form-item label="序列号:" prop="equipmentSerial">
                        <el-input v-model="formData.equipmentSerial" :clearable="true" :disabled="true"
                                  placeholder="请输入设备序列号"/>
                    </el-form-item>
                    <el-form-item label="设备编号:" prop="equipmentNum">
                        <el-input v-model="formData.equipmentNum" :clearable="true" placeholder="请输入设备编号"/>
                    </el-form-item>
                    <el-form-item label="设备名称:" prop="equipmentName">
                        <el-input v-model="formData.equipmentName" :clearable="true" placeholder="请输入设备名称"/>
                    </el-form-item>
                    <el-form-item label="生产厂家:" prop="manufacturer">
                        <el-input v-model="formData.manufacturer" :clearable="true" placeholder="请输入生产厂家"/>
                    </el-form-item>
                    <el-form-item label="设备型号:" prop="equipmentType">
                        <el-input v-model="formData.equipmentType" :clearable="true" placeholder="请输入设备型号"/>
                    </el-form-item>
                    <el-form-item label="设备种类:" prop="equipmentKind">
                        <el-select v-model="formData.equipmentKind" placeholder="请输入设备种类"
                                   class="full-width-input" clearable>
                            <el-option v-for="(item, index) in kindOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域:" prop="location">
                        <el-select v-model="formData.location" placeholder="请输入所在区域" class="full-width-input"
                                   clearable>
                            <el-option v-for="(item, index) in locationOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否固定:" prop="fixed">
                        <el-radio-group v-model="formData.fixed">
                            <el-radio v-for="(item, index) in fixedOptions" :key="index" :label="item.value"
                                      :disabled="item.disabled" style="{display: block}">{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="所属单位:" prop="affiliationUnit">
                        <el-select v-model="formData.affiliationUnit" placeholder="请输入所属单位"
                                   class="full-width-input" clearable>
                            <el-option v-for="(item, index) in unitOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属项目:" prop="affiliationProject">
                        <el-select v-model="formData.affiliationProject" placeholder="请输入所属项目"
                                   class="full-width-input" clearable>
                            <el-option v-for="(item, index) in projectOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备用途:" prop="equipmentUse">
                        <el-select v-model="formData.equipmentUse" placeholder="请输入设备用途" class="full-width-input"
                                   clearable>
                            <el-option v-for="(item, index) in useOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作人:" prop="operator">
                        <el-input v-model="formData.operator" :clearable="true" placeholder="请输入操作人"/>
                    </el-form-item>
                    <el-form-item label="负责人:" prop="principal">
                        <el-input v-model="formData.principal" :clearable="true" placeholder="请输入负责人"/>
                    </el-form-item>
                    <el-form-item label="生产状态:" prop="productionStatus">
                        <el-radio-group v-model="formData.productionStatus">
                            <el-radio v-for="(item, index) in productionOptions" :key="index" :label="item.value"
                                      :disabled="item.disabled" style="{display: block}">{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审核状态:" prop="auditStatus">
                        <el-radio-group v-model="formData.auditStatus">
                            <el-radio v-for="(item, index) in auditOptions" :key="index" :label="item.value"
                                      :disabled="item.disabled" style="{display: block}">{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="type=='update'" label="报修原因:" prop="repairsCause">
                        <el-input v-model="formData.repairsCause" :clearable="true" placeholder="请输入报修原因"/>
                    </el-form-item>
                    <el-form-item label="备注:" prop="remark" height="180px" >
                        <el-input v-model="formData.remark" :clearable="true" placeholder="请输入备注"/>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="enterDialog">确 定</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="detailShow" style="width: 800px" lock-scroll :before-close="closeDetailShow"
                   title="查看详情" destroy-on-close>
            <el-scrollbar height="550px">
                <el-descriptions column="1" border>
                    <el-descriptions-item label="序列号">
                        {{ formData.equipmentSerial }}
                    </el-descriptions-item>
                    <el-descriptions-item label="设备编号">
                        {{ formData.equipmentNum }}
                    </el-descriptions-item>
                    <el-descriptions-item label="设备名称">
                        {{ formData.equipmentName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="生产厂家">
                        {{ formData.manufacturer }}
                    </el-descriptions-item>
                    <el-descriptions-item label="设备种类">
                        {{ formData.equipmentKind }}
                    </el-descriptions-item>
                    <el-descriptions-item label="设备型号">
                        {{ formData.equipmentType }}
                    </el-descriptions-item>
                    <el-descriptions-item label="所在区域">
                        {{ formData.location }}
                    </el-descriptions-item>
                    <el-descriptions-item label="是否固定">
                        {{ formData.fixed }}
                    </el-descriptions-item>
                    <el-descriptions-item label="所属单位">
                        {{ formData.affiliationUnit }}
                    </el-descriptions-item>
                    <el-descriptions-item label="所属项目">
                        {{ formData.affiliationProject }}
                    </el-descriptions-item>
                    <el-descriptions-item label="设备用途">
                        {{ formData.equipmentUse }}
                    </el-descriptions-item>
                    <el-descriptions-item label="操作人">
                        {{ formData.operator }}
                    </el-descriptions-item>
                    <el-descriptions-item label="负责人">
                        {{ formData.principal }}
                    </el-descriptions-item>
                    <el-descriptions-item label="生产状态">
                        {{ formData.productionStatus }}
                    </el-descriptions-item>
                    <el-descriptions-item label="审核状态">
                        {{ formData.auditStatus }}
                    </el-descriptions-item>
                    <el-descriptions-item label="报修原因">
                        {{ formData.repairsCause }}
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        {{ formData.remark}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-scrollbar>
        </el-dialog>
    </div>
</template>

<script setup>

import {
    createEquipment,
    deleteEquipment,
    deleteEquipmentByIds,
    findEquipment,
    getEquipmentKindInfo,
    getEquipmentList,
    updateEquipment
} from '@/api/equipment'

// 全量引入格式化工具 请按需保留
import {formatDate} from '@/utils/format'
import {ElMessage, ElMessageBox} from 'element-plus'
import {reactive, ref} from 'vue'

defineOptions({
    name: 'Equipment'
})

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
    equipmentSerial: '',
    equipmentNum: '',
    equipmentName: '',
    manufacturer: '',
    equipmentKind: '',
    equipmentType: '',
    location: '',
    fixed: '',
    affiliationUnit: '',
    affiliationProject: '',
    equipmentUse: '',
    operator: '',
    principal: '',
    productionStatus: '',
    auditStatus: '',
    repairsCause: '',
    remark:'',
})

// 验证规则
const rule = reactive({})


const locationOptions = ref(
    [{
        "value": "5号工地1号基坑",
        "label": "5号工地1号基坑"
    }, {
        "value": "5号工地2号基坑",
        "label": "5号工地2号基坑"
    }, {
        "value": "5号工地3号基坑",
        "label": "5号工地3号基坑"
    }, {
        "value": "5号工地4号基坑",
        "label": "5号工地4号基坑"
    }, {
        "value": "5号工地5号基坑",
        "label": "5号工地5号基坑"
    }])

const unitOptions = ref(
    [{
        "value": "人事部",
        "label": "人事部"
    }, {
        "value": "财务部",
        "label": "财务部"
    }, {
        "value": "后勤部",
        "label": "后勤部"
    }, {
        "value": "工务部",
        "label": "工务部"
    }, {
        "value": "公安部",
        "label": "公安部"
    }])

const projectOptions = ref(
    [{
        "value": "全栈开发项目",
        "label": "全栈开发项目"
    }, {
        "value": "传媒优化项目",
        "label": "传媒优化项目"
    }, {
        "value": "互联网联通项目",
        "label": "互联网联通项目"
    }, {
        "value": "网站工程项目",
        "label": "网站工程项目"
    }, {
        "value": "云计算收集项目",
        "label": "云计算收集项目"
    }]
)

const useOptions = ref(
    [{
        "value": "市政建设",
        "label": "市政建设"
    }, {
        "value": "农业建设",
        "label": "农业建设"
    }, {
        "value": "八维建设",
        "label": "八维建设"
    }]
)

const productionOptions = ref(
    [{
        "value": "空闲中",
        "label": "空闲中"
    }, {
        "value": "使用中",
        "label": "使用中"
    }, {
        "value": "报修中",
        "label": "报修中"
    }]
)

const kindOptions = ref([])

const fixedOptions = ref(
    [{
        "label": "是",
        "value": "是"
    }, {
        "label": "否",
        "value": "否"
    }]
)

const auditOptions = ref(
    [{
        "label": "无",
        "value": "无"
    }, {
        "label": "未审核",
        "value": "未审核"
    }, {
        "label": "已审核",
        "value": "已审核"
    }]
)

const searchRule = reactive({
    createdAt: [
        {
            validator: (rule, value, callback) => {
                if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
                    callback(new Error('请填写结束日期'))
                } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
                    callback(new Error('请填写开始日期'))
                } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
                    callback(new Error('开始日期应当早于结束日期'))
                } else {
                    callback()
                }
            }, trigger: 'change'
        }
    ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(6)
const tableData = ref([])
const searchInfo = ref({})

// 重置
const onReset = () => {
    searchInfo.value = {}
    getTableData()
}
// 搜索
const onSubmit = () => {
    elSearchFormRef.value?.validate(async (valid) => {
        if (!valid) return
        page.value = 1
        pageSize.value = 6
        if (searchInfo.value.equipmentName === '') {
            searchInfo.value.equipmentName = null
        }
        if (searchInfo.value.equipmentKind === '') {
            searchInfo.value.equipmentKind = null
        }
        if (searchInfo.value.productionStatus === '') {
            searchInfo.value.productionStatus = null
        }
        if (searchInfo.value.equipmentNum === '') {
            searchInfo.value.equipmentNum = null
        }
        getTableData()
        kindOptions = []
        getKindData()
    })
}

// 分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}

// 查询
const getTableData = async () => {
    const table = await getEquipmentList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
    if (table.code === 0) {
        tableData.value = table.data.list
        total.value = table.data.total
        page.value = table.data.page
        pageSize.value = table.data.pageSize
    }
}

getTableData()

// 获取种类列表的数据
const getKindData = async () => {
    const kind = await getEquipmentKindInfo()
    if (kind.code === 0) {
        for (let i = 0; i < kind.data.length; i++) {
            kindOptions.value.push({
                "lable": kind.data[i].ID,
                "value": kind.data[i].kindName,
            })
        }
    }
}
getKindData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
}

// 获取需要的字典 可能为空 按需保留
setOptions()

// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteEquipmentFunc(row)
    })
}


// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async () => {
    const ids = []
    if (multipleSelection.value.length === 0) {
        ElMessage({
            type: 'warning',
            message: '请选择要删除的数据'
        })
        return
    }
    multipleSelection.value &&
    multipleSelection.value.map(item => {
        ids.push(item.ID)
    })
    const res = await deleteEquipmentByIds({ids})
    if (res.code === 0) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        if (tableData.value.length === ids.length && page.value > 1) {
            page.value--
        }
        deleteVisible.value = false
        getTableData()
    }
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateEquipmentFunc = async (row) => {
    const res = await findEquipment({ID: row.ID})
    type.value = 'update'



    productionOptions.value =
        [{
            "value": "空闲中",
            "label": "空闲中"
        }, {
            "value": "使用中",
            "label": "使用中"
        }, {
            "value": "报修中",
            "label": "报修中"
        }]
    if (res.code === 0) {
        formData.value = res.data.reequipment
        dialogFormVisible.value = true
    }
}


// 删除行
const deleteEquipmentFunc = async (row) => {
    const res = await deleteEquipment({ID: row.ID})
    if (res.code === 0) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        if (tableData.value.length === 1 && page.value > 1) {
            page.value--
        }
        getTableData()
    }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)


// 查看详情控制标记
const detailShow = ref(false)


// 打开详情弹窗
const openDetailShow = () => {
    detailShow.value = true
}


// 打开详情
const getDetails = async (row) => {
    // 打开弹窗
    const res = await findEquipment({ID: row.ID})
    if (res.code === 0) {
        formData.value = res.data.reequipment
        openDetailShow()
    }
}


// 关闭详情弹窗
const closeDetailShow = () => {
    detailShow.value = false
    formData.value = {
        equipmentSerial: '',
        equipmentNum: '',
        equipmentName: '',
        manufacturer: '',
        equipmentKind: '',
        equipmentType: '',
        location: '',
        fixed: '',
        affiliationUnit: '',
        affiliationProject: '',
        equipmentUse: '',
        operator: '',
        principal: '',
        productionStatus: '',
        auditStatus: '',
        repairsCause: '',
    }
}


// 打开弹窗
const openDialog = () => {
    let t = "ABCDEFGHJKMNPQRSTWXYZ12345678"
    let a = t.length
    let n = ""
    for (let i = 0; i < 16; i++) {
        n += t.charAt(Math.floor(Math.random() * a));
    }
    formData.value.equipmentSerial = n
    formData.value.productionStatus = "空闲中"
    formData.value.auditStatus = "无"
    formData.value.fixed = "是"

    productionOptions.value =
        [{
            "value": "空闲中",
            "label": "空闲中"
        }, {
            "value": "使用中",
            "label": "使用中"
        }]


    type.value = 'create'
    dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
    dialogFormVisible.value = false
    formData.value = {
        equipmentSerial: '',
        equipmentNum: '',
        equipmentName: '',
        manufacturer: '',
        equipmentKind: '',
        equipmentType: '',
        location: '',
        fixed: '',
        affiliationUnit: '',
        affiliationProject: '',
        equipmentUse: '',
        operator: '',
        principal: '',
        productionStatus: '',
        auditStatus: '',
        repairsCause: '',
    }
}
// 弹窗确定
const enterDialog = async () => {
    elFormRef.value?.validate(async (valid) => {
        if (!valid) return
        let res
        switch (type.value) {
            case 'create':
                res = await createEquipment(formData.value)
                break
            case 'update':
                res = await updateEquipment(formData.value)
                break
            default:
                res = await createEquipment(formData.value)
                break
        }
        if (res.code === 0) {
            ElMessage({
                type: 'success',
                message: '创建/更改成功'
            })
            closeDialog()
            getTableData()
        }
    })
}

</script>

<style>

</style>
